<template>
	<view>

		<form @submit="formSubmit" @reset="formReset">
								
						<view class="langs">
							
							
							<picker  :value="index" :range="Langs" @change="bindChange">
								<view>{{Langs[index]}}</view>
							</picker>
							<uni-icons  type="down" size="15"></uni-icons>
						</view>
							
						<view class="uni-form-item uni-column">
							<view class="title">switch</view>
							<view>
								<switch name="switch" />
							</view>
						</view>
						<view class="uni-form-item uni-column">
							<view class="title">radio</view>
							<radio-group name="radio">
								<label>
									<radio value="radio1" /><text>选项一</text>
								</label>
								<label>
									<radio value="radio2" /><text>选项二</text>
								</label>
							</radio-group>
						</view>
						<view class="uni-form-item uni-column">
							<view class="title">checkbox</view>
							<checkbox-group name="checkbox">
								<label>
									<checkbox value="checkbox1" /><text>选项一</text>
								</label>
								<label>
									<checkbox value="checkbox2" /><text>选项二</text>
								</label>
							</checkbox-group>
						</view>
						<view class="uni-form-item uni-column">
							<view class="title">slider</view>
							<slider value="50" name="slider" show-value></slider>
						</view>
						<view class="uni-form-item uni-column">
							<view class="title">input</view>
							<input class="uni-input" name="input" placeholder="这是一个输入框" />
						</view>
						<view class="uni-btn-v">
							<button form-type="submit">Submit</button>
							<button type="default" form-type="reset">Reset</button>
						</view>
					</form>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list:[
					{title:'测试',class:'swiper-item1'},
					{title:'测试2',class:'swiper-item2'},
					{title:'测试3',class:'swiper-item3'},
					{title:'测试4',class:'swiper-item4'}
				],
				Langs:['CHN','KOH','ENG'],
				index: 0,
				
			}
		},
		onLoad(){//页面加载时调用的方法
			console.log(this.list);
			this.res = JSON.stringify(this.list);
			// console.log(this.res);
		},
		methods: {
			bindChange:function(e){
				console.log('picker发送选择改变，携带值为', e.detail.value)
				this.index = e.detail.value
			}
		}
	}
</script>

<style>
.langs{border: 1rpx solid #ccc;border-radius: 2rpx;padding: 2rpx 5rpx;float: right;}
.title{ background-color: aqua;}


</style>
